.input-suggestions {
  min-width: 100%;
  position: absolute;
  box-shadow: $high-box-shadow;
  top: calc(100%);
  left: 0;
  border-radius: 3px;
  background: white;
  font-size: 11px;
  user-select: none;

  .suggestion {
    font-family: $mono-font;
    padding: 6px 8px;
    margin: 0;
    white-space: nowrap;
    height: 25px;
    cursor: default;

    &:hover {
      background: $white-3;
    }

    &.active,
    &:active {
      &:first-child {
        border-radius: 3px 3px 0 0;
      }
      &:last-child {
        border-radius: 0 0 3px 3px;
      }
      background: $blue;
      color: white;
    }

    &.error {
      color: $white-9;
    }
  }
}
